<template>
        <div id="drzx" class="container-fluid padding">
            <!--所有坐席数据-->
            <fieldset class="layui-elem-field layui-field-title">
                <legend>所有坐席数据</legend>
            </fieldset>
            <table class="layui-hide" id="zuoxilist"  lay-filter="zuoxilist"></table>
            <script type="text/html" id="zuoxiToolbar">
                <button class="el-button el-button--primary is-round el-button--mini" lay-event="add">新增坐席</button>
                <button class="el-button el-button--primary is-round el-button--mini" lay-event="refresh">刷新</button>
            </script>
            <script type="text/html" id="zuoxiBar">
              <button class="el-button el-button--mini el-button--primary is-round" lay-event="edit">编辑</button>
              <button class="el-button el-button--mini el-button--danger is-round" lay-event="del">删除</button>
            </script>
            <!--所有上传的文件列表 先关闭这个功能，使用再打开-->
            <div style="display: none">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>所有上传的文件列表</legend>
                </fieldset>
                <table class="layui-hide" id="filelist" lay-filter="filelist"></table>
                <script type="text/html" id="fileToolbar">
                  <div class="layui-btn-container">
                    <a id="download" class="el-button el-button--mini el-button--primary is-round"  lay-event="templateDownload" title="下载exel文件到本地">下载（坐席）模版文件到本地</a>
                  </div>
                </script>
                <script type="text/html" id="fileBar">
                    <button class="el-button el-button--mini el-button--primary is-round" lay-event="download" target="_blank">下载</button>
                </script>
            </div>
            <!--重新注册网关-->
            <div class="layui-btn-container small padding">
                <a class="el-button el-button--primary is-round" title="重新注册坐席" @click="reloadCallcenter()">重新注册坐席</a>
            </div>
            <!--文件上传 先关闭这个功能，使用再打开-->
            <div style="display: none">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>拖拽上传，请选择xls、exel、cvs文件上传</legend>
                    <el-upload
                            class="upload-demo"
                            drag
                            :with-credentials="credentials"
                            :action="burl+'cti-manager-gw/upload/'"
                            multiple>
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">点击上传，或将文件拖拽到此处，仅支持xls、exel、cvs文件</div>
                    </el-upload>
                </fieldset>
            </div>
            <!--隐藏项-->
            <div id="edit" v-show="false" >
                <div class="container-fluid padding">
                    <el-form :model="saveDatas" :rules="rules" ref="saveDatas" label-width="150px" class="padding">
                        <el-form-item label="坐席名称" prop="name">
                            <el-input v-model="saveDatas.name" :disabled="zuoxiDisabled"></el-input>
                        </el-form-item>
                        <el-form-item label="坐席号码" prop="number">
                            <el-input v-model="saveDatas.number"></el-input>
                        </el-form-item>
                        <el-form-item label="坐席类型" prop="type">
                            <el-select v-model="saveDatas.type">
                                <el-option v-for="item in type" :key="item.id" :value="item.key" :label="item.value">{{item.value}}</el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="坐席状态" prop="status">
                            <el-select v-model="saveDatas.status">
                                <el-option v-for="item in status" :key="item.id" :value="item.key" :label="item.value">{{item.value}}</el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="未接来电最大响铃次数（设置为0时是无限次）" prop="max_no_answer">
                            <el-input v-model="saveDatas.max_no_answer"></el-input>
                        </el-form-item>
                        <el-form-item label="最大包裹时间" prop="wrap_up_time">
                            <el-input v-model="saveDatas.wrap_up_time"></el-input>
                        </el-form-item>
                        <el-form-item label="拒接后延迟时间（S）" prop="reject_delay_time">
                            <el-input v-model="saveDatas.reject_delay_time"></el-input>
                        </el-form-item>
                        <el-form-item label="忙后延迟时间（S）" prop="busy_delay_time">
                            <el-input v-model="saveDatas.busy_delay_time"></el-input>
                        </el-form-item>
                        <el-form-item label="等级（越低越靠前）" prop="level">
                            <el-input v-model="saveDatas.level"></el-input>
                        </el-form-item>
                        <el-form-item label="位置（越低越靠前）" prop="position">
                            <el-input v-model="saveDatas.position"></el-input>
                        </el-form-item>
                        <el-form-item label="">
                            <el-button type="primary" @click="save('saveDatas')">保存</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
</template>

<script>
    import {formatSize,formatDateTime} from '../../../../common/js/util';
    export default {
        name: "drzx",
        beforeCreate:function(){
            this.$nextTick(function () {
                layui.use('table', ()=>{
                    layui.table.render({
                        elem: '#zuoxilist'
                        ,url: burl+'cti-manager-zuoxi/list/' //数据接口
                        ,toolbar: '#zuoxiToolbar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                        ,height: 480
                        ,cols: [this.table_head]
                        ,page:true,
                    });
                    //头工具栏事件
                    layui.table.on('toolbar(zuoxilist)', (obj)=>{
                        switch(obj.event){
                            case 'add':
                                this.zuoxiDisabled =  false;
                                allType = 'add';
                                this.saveDatas = {
                                    name:"第"+(allCount+1)+"个",
                                    number:"",
                                    type:"",
                                    status:"",
                                    max_no_answer:"0",
                                    wrap_up_time:"10",
                                    reject_delay_time:"10",
                                    busy_delay_time:"10",
                                    level:"1",
                                    position:"1",
                                };
                                allIndex = this.$message_.layOpen("#edit");
                                this.editObj = obj;
                                break;
                            case 'refresh':
                                layui.table.render({
                                    elem: '#zuoxilist'
                                    ,url: burl+'cti-manager-zuoxi/list/' //数据接口
                                    ,toolbar: '#zuoxiToolbar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                                    ,height: 480
                                    ,cols: [this.table_head]
                                    ,page:true,
                                });
                                break;
                        };
                    });
                    //监听行工具事件
                    layui.table.on('tool(zuoxilist)', (obj)=>{
                        if(obj.event === 'del'){
                            layer.confirm('确认删除该行吗？', (index)=>{
                                layer.close(index);
                                this.$message_.postTips(this,'删除','cti-manager-zuoxi/delete',{id:obj.data.id,},null,()=>{
                                    obj.del();
                                    layer.close(index);
                                })
                            });
                        } else if(obj.event === 'edit'){
                            this.zuoxiDisabled =  true;
                            allType = 'edit';
                            this.saveDatas = obj.data;
                            allIndex = this.$message_.layOpen("#edit");
                            this.editObj = obj;
                        }
                    });
                    // 再次加载出表格数据（之前已经加载出来了dom数据）
                    layui.table.render({
                        elem: '#filelist'
                        ,url: burl+'cti-manager-zuoxi/file-list' //数据接口
                        ,toolbar: '#fileToolbar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                        ,height: 400
                        ,cols: [this.file_table_head]
                    });
                    //头工具栏事件
                    layui.table.on('toolbar(filelist)', (obj)=>{
                        switch(obj.event){
                            case 'templateDownload':
                                $("#download").attr("href",burl+'cti-manager-zuoxi/template-download');
                                $("#download").click();
                                break;
                        };
                    });
                    //监听行工具事件
                    layui.table.on('tool(filelist)', (obj)=>{
                        var data = obj.data;
                        switch(obj.event){
                            case 'download':
                                this.$my_.downloadFile(data.name,data.path);
                                break;
                        };
                    });
                })
            })
        },
        data() {
            return {
                zuoxiDisabled:false,
                editObj:{},
                credentials:true,
                burl :burl,
                table_head:[
                      {field: 'id',  title: '序列号', sort: true, fixed: 'left', totalRowText: '合计：',width:120,align:'center'}
                    , {field: 'name', title: '坐席名称', sort: true,width:140,align:'center'}
                    , {field: 'number',  title: '坐席号码',  totalRow: true,width:140,align:'center'}
                    , {field: 'type',
                        title: '坐席类型',
                        totalRow: true,
                        templet: function(res){
                            var result;
                            switch (res.type){
                                case "callback":
                                    result = "onhook类型（有电话分配到该坐席时，将会自动呼叫该坐席）";break;
                                case "uuid-standby":
                                    result = "offhook类型（该坐席需要先拨打短号签入，然后才能接到电话）";break;
                                default:
                                    result = "";break;
                            }
                            return result;
                        },width:360,align:'center'
                    }
                    , {field: 'status',
                        title: '坐席状态',
                        totalRow: true,
                        templet: function(res){
                            var result;
                            switch (res.status){
                                case "Logged Out":
                                    result = "完全限制";break;
                                case "Available":
                                    result = "可以接电话";break;
                                case "Available(On Demand)":
                                    result = "一种特殊的可用状态";break;
                                case "On Break":
                                    result = "限制接电话";break;
                                default:
                                    result = "";break;
                            }
                            return result;
                        },width:180,align:'center'
                    }
                    , {field: 'max_no_answer',  title: '未接来电最大响铃次数',  totalRow: true,width:170,align:'center'}
                    , {field: 'wrap_up_time',  title: '最大包裹时间（S）',  totalRow: true,width:170,align:'center'}
                    , {field: 'reject_delay_time',  title: '拒接后延迟时间（S）',  totalRow: true,width:170,align:'center'}
                    , {field: 'busy_delay_time',  title: '忙后延迟时间（S）',  totalRow: true,width:170,align:'center'}
                    , {field: 'level',  title: '等级（越低越靠前）',  totalRow: true,width:170,align:'center'}
                    , {field: 'position',  title: '位置（越低越靠前）',  totalRow: true,width:170,align:'center'}
                    , {field: 'create_at',title: '创建时间',sort: true,templet: function(res){return formatDateTime(res.create_at);},width:240,align:'center'}
                    , {field: 'update_at',title: '更新时间',sort: true,templet: function(res){return formatDateTime(res.update_at);},width:240,align:'center'}
                    , {fixed: 'right', width: 165, align:'center', toolbar: '#zuoxiBar'}
                ],
                file_table_head:[
                    {field: 'id',  title: '序列号', sort: true}
                    , {field: 'name',  title: '文件名称', sort: true}
                    , {field: 'path',  title: '文件路径', sort: true}
                    , {field: 'filesize',
                        title: '文件大小',
                        sort: true,
                        templet: function(res){
                            return formatSize(res.filesize);
                        }}
                    , {field: 'create_at',
                        title: '创建时间',
                        sort: true,
                        templet: function(res){
                            return formatDateTime(res.create_at);
                        }}
                    , {field: 'update_at',
                        title: '更新时间',
                        sort: true,
                        templet: function(res){
                            return formatDateTime(res.update_at);
                        }}
                    , {fixed: 'right',
                        width: 165,
                        align:'center',
                        // templet: function(res){
                        //     return '<a href="'+res.path+'" download="'+res.name+'" ><span>下载</span></a>';
                        // }
                        templet: "#fileBar"
                    }
                ],
                saveDatas:{
                    name:"",
                    number:"",
                    type:"",
                    status:"",
                    max_no_answer:"",
                    wrap_up_time:"",
                    reject_delay_time:"",
                    busy_delay_time:"",
                    level:"",
                    position:"",
                },
                rules:{
                    name: [
                        { required: true, message: '请输入名称', trigger: 'blur' },
                    ],
                },
                type:
                    [
                        {key:"callback",value:"onhook类型（有电话分配到该坐席时，将会自动呼叫该坐席）"},
                        {key:"uuid-standby",value:"offhook类型（该坐席需要先拨打短号签入，然后才能接到电话）"},
                    ],
                status:
                    [
                        {key:"Logged Out",value:"完全限制"},
                        {key:"Available",value:"可以接电话"},
                        {key:"Available(On Demand)",value:"一种特殊的可用状态"},
                        {key:"On Break",value:"限制接电话"},
                    ],
            }
        },
        methods: {
            reloadCallcenter: function () {
                layer.confirm("确定是否要注册坐席？",(i)=>{
                    layer.close(i);
                    this.$message_.postTips(this,'服务器重新注册坐席','cti-manager-zuoxi/get-callcenter',{},null,()=>{
                        layer.confirm("服务器重新注册坐席成功，请等待服务器坐席重启，大概花费20秒左右！",(i)=>{
                            layer.close(i);
                        });
                    });
                });
            },
            save:function (saveDatas) {
                this.$refs[saveDatas].validate((valid) => {
                    if (valid) {
                        switch (allType){
                            case "edit":
                                this.$message_.postTips(this,'修改','cti-manager-zuoxi/update',this.saveDatas,null,()=>{
                                    if (allSuccess=='success'){
                                        layer.close(allIndex);
                                        this.editObj.update(this.saveDatas);
                                    }
                                });
                                break;
                            case "add":
                                this.$message_.postTips(this,'新增','cti-manager-zuoxi/update',this.saveDatas,null,()=>{
                                    if (allSuccess=='success'){
                                        layer.close(allIndex);
                                    }
                                });
                                break;
                        }
                        return false;
                    } else {
                        return false;
                    }
                });
            }
        }
    }
</script>